<template>
  <div class="view-page ranking-container">
    <div class="ranking-top">
      <!-- <div class="ranking-type" @click="getRankingType(2)">
        <img src="img/ranking/last-week.png" class="ranking-type-img" alt>
      </div>
      <div class="ranking-type" @click="getRankingType(4)">
        <img src="img/ranking/last-season.png" class="ranking-type-img" alt>
      </div>
      <div class="ranking-type" @click="getRankingType(1)">
        <img src="img/ranking/this-week.png" class="ranking-type-img" alt>
      </div> -->
      <!-- <div class="ranking-type" @click="getRankingType(3)">
        <img src="img/ranking/this-season.png" class="ranking-type-img" alt>
      </div> -->
      <div class="ranking-type">
        <div class="ranking-box gradient-3" @click="getRankingType(2)" :class="{'selected': rankingType === 2}">
          <span>上周榜</span>
        </div>
      </div>
      <div class="ranking-type">
        <div class="ranking-box gradient-4" @click="getRankingType(3)" :class="{'selected': rankingType === 3}">
          <span>本月榜</span>
        </div>
      </div>
      <div class="ranking-type">
        <div class="ranking-box gradient-2" @click="getRankingType(4)" :class="{'selected': rankingType === 4}">
          <span>上月榜</span>
        </div>
      </div>
      <!-- <div class="ranking-type">
        <div class="ranking-box gradient-3" @click="getRankingType(1)">
          <span>本周榜</span>
        </div>
      </div> -->

    </div>
    <div v-if="rankingList.length === 0" style="text-align: center;font-size: 1rem;">
      <span>暂无数据</span>
    </div>
    <div class="ranking-list-container">
      <ul>
        <li v-for="(item, i) of rankingList" :key="i" class="task-item">
          <span class="rank-index">
            <img
              v-if="i < 3"
              :src="`img/ranking/rank${i + 1}-medal.png`"
              alt
              class="rank-medal"
            >
            <span v-else>{{ i + 1 }}</span>
          </span>
          <span class="rank-avatar">
            <img
              v-if="i < 3"
              :src="`img/ranking/rank${i + 1}-crown.png`"
              alt
              class="rank-crown"
            >
            <img :src="item.headUrl" alt>
          </span>
          <span class="rank-username">{{item._username}}</span>
          <span class="rank-amount">
            <span>{{item.totalPrice}}</span>
            <img src="img/ranking/user-diamond.png" alt>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'Vuex';
export default {
  data: () => ({
    rankingType: 2,
    rankingList: [],
    ranking: {
      lastWeek: [],
      thisWeek: [],
      thisSeason: [],
      lastSeason: []
    }
  }),
  mounted() {
    this.getRankingType(2);
  },
  computed: {
    ...mapState(['api'])
  },
  methods: {
    getRankingType(types) {
      if(window.btn_sound) {
        window.btn_sound.play();
      }
      this.rankingType = types;
      this.api.homePage.getRankingList({ types }).then(res => res.json()).then(data => {
        if(data.source) {
          console.log('getRankingList', data);
          this.rankingList = this.processList(data.source);
        } else {
          this.rankingList = [];
        }

      })
      .catch((err) => {
        console.error('请求数据出错', err);
      })
    },
    processList(list) {
      list.forEach((item, i) => {
        item._username = item.nickname[0] + "⭐⭐";
        if(window.location.href.match('10.10.10')) {
          item.headUrl = item.headUrl.replace(
                  "./",
                  "https://c-c.jiahuagame.com/console/"
                );
        }
      });
      return list;
    }
  }
};
</script>

<style lang="less" scoped>
.ranking-container {
  color: #202020;
  overflow-y: scroll;
}


.ranking-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 5rem;
  padding: 8px 0;
  flex-wrap: wrap;
}

.ranking-type {
  display: flex;
  justify-content: center;
  align-items: center;
  // flex-basis: 33%;
  flex: 1;
}

.ranking-box {
  height: 1.6rem;
  line-height: 1.6rem;
  width: 90%;
  border-radius: 0.5rem;
  color: white;
  font-size: 0.9rem;
  text-align: center;
  transition: 1s 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
  &.selected {
    transform: translateY(-4px);
    box-shadow: 0px 2px 2px 1px #002d1e87;
  }
}

.gradient-1 {
  background: linear-gradient(60deg, #77aee2, #5beaba);

}
.gradient-2 {
  background: linear-gradient(60deg, #CDDC39, #4DB6AC);
}
.gradient-3 {
  background: linear-gradient(60deg, #E91E63, #FF5722);
}
.gradient-4 {
  background: linear-gradient(60deg, #673AB7, #00BCD4);
}

.ranking-type-img {
  width: 60%;
}

.task-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: #bfbfbf 1px solid;
  padding: 4px 0;
}

.rank-index {
  position: relative;
  width: 1rem;
  height: 1.2rem;
  color: #202020;
  text-align: center;
  line-height: 1.1rem;
  vertical-align: middle;
  font-size: 0.8rem;
  .rank-medal {
    width: 1.2rem;
    height: 1.5rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
  span {
    background: #03A9F4;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    display: inline-block;
    color: white;
    text-align: center;
    line-height: 1rem;
    vertical-align: middle;
  }
}

.rank-avatar {
  width: 2rem;
  height: 2rem;
  position: relative;
  top: 4px;

  img {
    width: 1.6rem;
    height: 1.63rem;
    border-radius: 50%;
  }

  .rank-crown {
    width: 2.3rem;
    height: 2.2rem;
    position: absolute;
    left: -0.1rem;
    top: -0.4rem;
    z-index: -1;
  }
}

.rank-username {
  font-size: 0.8rem;
}

.rank-amount {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e87f32;
  font-size: 1.1rem;
  img {
    margin-left: 10px;
    width: 1.2rem;
    height: 1.2rem;
  }
}
</style>

